<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用vue 实现的数据双向绑定效果 -->
        <p>{{username}}</p>
        <input type="text" v-model="username">

        <!--  -->
        <p></p>
        <input type="text">
    </div>
</body>

</html>
<script>
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                message1: 'Hello',
                username: '小岳岳'
            }
        }
    }).mount('#app')


    // 原生js
    const obj1 = { age: 10 };
    // 语法:   Object.defineProperty(要操作的对象,操作的对象属性,配置对象为该属性的描述符)
    Object.defineProperty(obj1, 'name', {
        //value: '码小花',
        // writable: true,
        get() {
            // 当访问该对象上的name 时 , 触发 get 方法
            console.log('访问了name 属性');
            return '会娟老师'
        },
        set(val) {
            // 当修改obj1 对象上的name 属性时, 触发set 方法
            // set 方法用来监听对象的修改
            console.log('我被修改了');
            // val 属性的值, 就是要修改的赋的值
            console.log('val', val);
            // obj1.name = val

        }
    })


    // console.log('obj1', obj1);
    //01: 访问 obj1 对象上的name 属性
    // console.log('访问', obj1.name);
    // obj1.name

    // 02: 修改name 属性
    obj1.name = '码小花'

    console.log('obj1', obj1);


</script>